<template>
  <div class="webdesign-page">
    <!-- 如果有子路由，显示子路由内容 -->
    <router-view v-if="$route.matched.length > 1" />
    <!-- 如果没有子路由，显示默认内容 -->
    <template v-else>
      <!-- 顶部分类标签 -->
      <div class="category-tabs">
        <div
          class="tab-item"
          v-for="category in categories"
          :key="category.key"
          :class="{ active: activeCategory === category.key }"
          @click="setActiveCategory(category.key)"
        >
          {{ category.label }}
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="content-area">
        <!-- 内容网格 -->
        <div class="content-grid">
         <homeItem v-for="item in contentItems" :item="item" :key="item.id" @click="goToDetails(item.id)" />
        </div>
        <div class="page">
        <el-pagination
          :page-size="pages.pageSize"
          :pager-count="pages.count"
          :current-page="pages.page"
          layout="prev, pager, next"
          :total="pages.total"
          @current-change="projectList">
        </el-pagination>
    </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref,reactive } from "vue";
import { useRouter } from "vue-router";
import { Clock, View } from "@element-plus/icons-vue";
import homeItem from '@/views/components/homeItem.vue'

import logo from "@/assets/generated.png";
import logo4 from "@/assets/4.jpg";
import logo5 from "@/assets/5.jpg";
import logo6 from "@/assets/6.jpg";
import logo7 from "@/assets/7.jpg";
import avatar from "@/assets/avatar.png";
import avatar1 from "@/assets/avatar1.png";

// 获取路由实例
const router = useRouter();
// 分页器
const pages=reactive({
  pageSize:10,
  page:1,
  count:11,
  total:1000
})
// 选择页码
const projectList=()=>{
  console.log(pages.page)
}
// 分类数据
const categories = ref([
  { key: "all", label: "All" },
  { key: "mathematic", label: "Mathematic" },
  { key: "ontology", label: "Ontology" },
  { key: "chemistry", label: "Chemistry" },
  { key: "medical", label: "Medical Science" },
]);

// 当前激活的分类
const activeCategory = ref("all");

// 内容项目
const contentItems = ref([
  {
    id: 1,
    title:
      "Regression Decision Treesusting in data mining Regression Decision Treesusting in data mining",
    image: logo,
    author: {
      name: "UOW Podcast",
      avatar: avatar,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 2,
    title: "Regression Decision Treesusting in data mining",
    image: logo4,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 3,
    title: "Seedling development law",
    image: logo5,
    author: {
      name: "UOW Podcast",
      avatar: avatar,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 4,
    title: "Regression Decision Treesusting in data mining",
    image: logo6,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 5,
    title: "Regression Decision Treesusting in data mining",
    image: logo7,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 6,
    title:
      "Regression Decision Treesusting in data mining Regression Decision Treesusting in data mining",
    image: logo,
    author: {
      name: "UOW Podcast",
      avatar: avatar,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 7,
    title: "Regression Decision Treesusting in data mining",
    image: logo4,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 8,
    title: "Seedling development law",
    image: logo5,
    author: {
      name: "UOW Podcast",
      avatar: avatar,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 9,
    title: "Regression Decision Treesusting in data mining",
    image: logo6,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
  {
    id: 10,
    title: "Regression Decision Treesusting in data mining",
    image: logo7,
    author: {
      name: "UOW Podcast",
      avatar: avatar1,
    },
    type: "Podcast",
    timeAgo: "2 weeks ago",
    views: "86.6k",
    tag: "Computer Science",
  },
]);

// 设置激活分类
const setActiveCategory = (category) => {
  activeCategory.value = category;
  console.log("切换到分类:", category);
};

// 跳转到详情页
const goToDetails = (id) => {
  console.log("跳转到详情页，ID:", id);
  // router.push("/weDesign/details");
};
</script>

<style lang="scss" scoped>
@use "@/styles/variables.scss" as *;

.webdesign-page {
  padding: 20px;
  border-radius: 6px;
  margin-right: 20px;
  margin-bottom: 20px;

  .category-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 4px;

    .tab-item {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;
      font-weight: 400;
      font-size: 18px;
      line-height: 32px;
      color: rgba(254, 254, 254, 0.7);
      background-color: #414055;

      &:hover {
        background: #414055;
        color: #e34234;
      }

      &.active {
        background: #4f2730;
        color: #e34234;
      }
    }
  }

  .filters {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;

    .filter-group {
      .filter-dropdown {
        .filter-button {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 12px;
          border: none;
          backdrop-filter: blur(10px);
          color: #bdbcc4;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 14px;

          &:hover {
            background: rgba(255, 255, 255, 0.15);
          }

          .dropdown-icon {
            color: rgba(255, 255, 255, 0.6);
            margin-left: 8px;
            transition: transform 0.3s ease;
          }
        }

        &.is-active .filter-button .dropdown-icon {
          transform: rotate(180deg);
        }
      }

      :deep(.el-dropdown-menu__item) {
        &:hover {
          background: rgba(227, 66, 52, 0.2) !important;
        }
      }
    }
  }

  .content-area {
    width: 100%;
    display: flex;
    flex-direction: column;

    .featured-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 24px;

      .featured-carousel {
        width: 100%;
        height: 323px;
        border-radius: 6px;
        position: relative;

        :deep(.el-carousel__container) {
          height: 323px !important;
        }

        :deep(.el-carousel__item) {
          border-radius: 6px;
          overflow: hidden;
        }

        :deep(.el-carousel__arrow) {
          background: rgba(0, 0, 0, 0.5);
          border: none;
          color: white;

          &:hover {
            background: rgba(0, 0, 0, 0.7);
          }
        }

        // 自定义指示器样式
        :deep(.el-carousel__indicators) {
          position: absolute;
          bottom: 16px;
          right: 16px;
          left: auto;
          transform: none;
          display: flex;
          gap: 8px;

          .el-carousel__indicator {
            width: 8px;
            height: 8px;
            padding: 0;
            margin: 0;

            .el-carousel__button {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.4);
              border: none;
              transition: all 0.3s ease;

              &:hover {
                background: rgba(255, 255, 255, 0.6);
                transform: scale(1.2);
              }
            }

            &.is-active .el-carousel__button {
              background: white;
              transform: scale(1.2);
            }
          }
        }

        .carousel-slide {
          width: 100%;
          height: 323px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          border-radius: 6px;
          cursor: pointer;

          .carousel-content {
            width: 100%;
            height: 323px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            box-sizing: border-box;
            background: linear-gradient(
              135deg,
              rgba(0, 0, 0, 0.3) 0%,
              rgba(0, 0, 0, 0.4) 100%
            );

            h2 {
              font-size: 24px;
              font-weight: 600;
              line-height: 1.3;
              color: white;
              max-width: 90%;
              margin: 0px 20px 32px;
            }
          }
        }
      }

      .side-cards {
        width: 100%;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        .side-card {
          height: 151px;
          display: flex;
          flex-direction: column;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.3s ease;

          h2 {
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            padding: 12px;
          }

          .side-content {
            width: 100%;
            height: 151px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            box-sizing: border-box;
            transition: all 0.3s ease;
            background: linear-gradient(
              135deg,
              rgba(0, 0, 0, 0.3) 0%,
              rgba(0, 0, 0, 0.4) 100%
            );
            cursor: pointer;

            .time {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding: 15px 13px;

              .text {
                font-weight: 400;
                font-size: 16px;
                color: #ffffff;
                margin-left: 8px;
              }
            }
          }

          &:hover {
            transform: translateY(-2px);

            .side-content {
              background: linear-gradient(
                135deg,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.7) 100%
              );
            }
          }
        }
      }
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 30px;

    }
  }
}
.page{
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 20px;
  align-items: center;
}
</style>
